import React, { useState } from 'react';
import Form from 'taro-vform';
import dayjs from 'dayjs';
import { AtList, AtListItem } from 'taro-ui'
import "taro-ui/dist/style/components/list.scss";
import { Picker, View } from '@tarojs/components'
export default (props) => {
  const { require, label, onlyKey, placeholder, setting, form } = props;
  const [data, setData] = useState('')
  const dataMat = setting === 'day' ? 'YYYY-MM-DD' : 'YYYY-MM'
  return (

    <Form.Item
      name={onlyKey ? onlyKey : label}
      label={label}
      rules={[{ required: require, message: `${label}不能为空` }]}
      trigger="onConfirm"

    >
      <View>
        <Picker
          mode='date'
          onChange={(e) => {
            setData(e.target.value)
            form.setFieldValue(
              onlyKey ? onlyKey : label, e.target.value
            )
          }}
          fields={setting !== 'day' ? 'month' : 'day'}
        >
          <AtList>
            <AtListItem title={`请选择${label}`} extraText={data} />
          </AtList>
        </Picker>
      </View>

    </Form.Item >
  );
};
